<template>
  <div class="product_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('ProductDetail.Product Details')" :icon_color="'white'" :title_color="'white'" :bgBase="'#EE3E57'"></v-nav>
    <div class="product_mod_box">
      <div class="product_mod_box_desc">
        <div class="product_mod_box_desc_img">
          <img :src="productDetail.image" alt="" />
        </div>
        <div class="product_mod_box_desc_text">
          <p>
            <span>{{ $t('ProductDetail.product name') }}</span>
          </p>
          <p>
            <span>{{ productDetail.name }}</span>
          </p>
        </div>
      </div>
      <div class="product_mod_box_content">
        <div class="product_mod_box_content_info">
          <div class="product_mod_box_content_info_one">
            <div>
              <p>{{ productDetail.cycle }}({{ $t('ProductDetail.day') }})</p>
              <p>{{ $t('ProductDetail.financial cycle') }}</p>
            </div>
            <div>
              <p>{{ productDetail.income_type == 0 ? productDetail.daily_income + '%' : productDetail.daily_income }}</p>
              <p>{{ $t('ProductDetail.Daily income') }}</p>
            </div>
            <div>
              <p>{{ productDetail.default }}%</p>
              <p>{{ $t('ProductDetail.Default ratio') }}</p>
            </div>
            <div>
              <p>{{ (productDetail.buy_min || 0) + '~' + (productDetail.buy_max || 0) }}</p>
              <p>{{ $t('ProductDetail.Single transaction limit') }}(USDT)</p>
            </div>
          </div>
          <div class="product_mod_box_content_info_line"></div>
          <div class="product_mod_box_content_info_two">
            <div>
              <p>
                <span>{{ $t('ProductDetail.Dividend time') }}</span>
              </p>
              <p>{{ $t('ProductDetail.daily') }}</p>
            </div>
            <div>
              <p>
                <span>{{ $t('ProductDetail.Escrow funds') }}</span>
              </p>
              <p>{{ $t('ProductDetail.Return upon expiration') }}</p>
            </div>
            <div>
              <p>
                <span>{{ $t('ProductDetail.Available assets') }}(USDT)</span>
              </p>
              <p>{{ userMoney }}</p>
            </div>
          </div>

          <div class="product_mod_box_content_info_line"></div>
          <div class="product_mod_box_content_info_three">
            <p>{{ $t('ProductDetail.investment amount') }}</p>
            <van-field v-model="buyMoney" @input="handlePrice(buyMoney)" type="number" :placeholder="$t('ProductDetail.Please enter investment amount')">
              <template #button>
                <van-button class="usdt" size="small" color="#F3F3F3">USDT</van-button>
                <van-button class="all" size="small" color="#F3F3F3" @click="buyMoney = userMoney">{{ $t('ProductDetail.all') }}</van-button>
              </template>
            </van-field>
          </div>
        </div>

        <div class="product_info">
          <h1>{{ $t('ProductDetail.Basic parameters') }}</h1>
          <p>{{ $t('ProductDetail.Manufacturer') }}: {{ productDetail.manufacturer }}</p>
          <p>{{ $t('ProductDetail.Rated computing power') }}: {{ productDetail.computing_power }}</p>
          <p>{{ $t('ProductDetail.Wall power consumption') }}: {{ productDetail.consumption }}</p>
          <p>{{ $t('ProductDetail.Carton size') }}: {{ productDetail.size }}</p>
          <p>{{ $t('ProductDetail.Total Weight') }}: {{ productDetail.weight }}</p>
          <p>{{ $t('ProductDetail.Operating temperature') }}: {{ productDetail.temperature }}</p>
          <p>{{ $t('ProductDetail.Working humidity') }}: {{ productDetail.humidity }}</p>
          <p>{{ $t('ProductDetail.Internet connection') }}: {{ productDetail.connect }}</p>
        </div>
      </div>
    </div>
    <div class="moomoo-bottom">
      <div class="moomoo-bottom-submit">
        <van-button color="#DAAB51" round block @click="submit">{{ $t('ProductDetail.Buy now') }}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ProductDetail',
  data() {
    return {
      productDetail: {},
      isDayTime: false,
      buyMoney: null,
      userMoney: '0.00',
      loading: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  created() {
    this.id = this.$route.query.id
  },
  activated() {
    this.loading = true
    Promise.race([this.getMiningDetail(), this.getExchangeRate()])
      .then(res => {
        this.loading = false
      })
      .catch(res => {
        this.loading = false
      })
  },
  methods: {
    getMiningDetail() {
      return this.$https.get('/platform/getMiningDetail?id=' + this.id ).then(res => {
        this.productDetail = res.data
        this.productDetail.min_deposit_amount = parseInt(this.productDetail.min_deposit_amount / 1)
        this.productDetail.max_deposit_amount = parseInt(this.productDetail.max_deposit_amount / 1)
      })
    },
    // 获取币种余额
    getExchangeRate() {
      return this.$https.get('/wallet/currencyBalance?type=0').then(res => {
        if (res != undefined && res.code == 1) {
          this.userMoney = res.data
        }
      })
    },
    // 限制保留两位小数
    handlePrice(val) {
      if (val !== '' && val.substr(0, 1) === '.') {
        val = ''
      }
      val = val.replace(/^0*(0\.|[1-9])/, '$1') //解决 粘贴不生效
      val = val.replace(/[^\d.]/g, '') //清除“数字”和“.”以外的字符
      val = val.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') //只能输入两个小数
      if (val.indexOf('.') < 0 && val !== '') {
        if (val.substr(0, 1) === '0' && val.length === 2) {
          val = val.substr(1, val.length)
        }
      }
      if (+val > +this.userMoney) {
        val = this.userMoney
      }
      this.buyMoney = val
    },
    async submit() {
      if (+this.buyMoney <= 0) {
        return this.$toast(this.$t('ProductDetail.Please enter investment amount'))
      }
      if (+this.buyMoney < +this.productDetail.buy_min || +this.buyMoney > +this.productDetail.buy_max) {
        return this.$toast(this.$t('ProductDetail.Minimum buying amount') + this.productDetail.buy_min + ', ' + this.$t('ProductDetail.Maximum buying amount') + this.productDetail.buy_max)
      }

      let params = {
        id: this.productDetail.id,
        money: this.buyMoney
      }
      this.loading = true
      await this.$https.post('/coin/addMiningOrder', params).then(res => {
        if (res != undefined && res.code == 1) {
          this.buyMoney = null
          this.getExchangeRate()
        }
      })
      this.loading = false
    }
  }
}
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>
